基于Vue 3 + Typescript + Vite 搭建H5通用架子

您所在的位置：网站首页 › vue h5框架 › 基于Vue 3 + Typescript + Vite 搭建H5通用架子

基于Vue 3 + Typescript + Vite 搭建H5通用架子

#基于Vue 3 + Typescript + Vite 搭建H5通用架子| 来源: 网络整理| 查看: 265

基于Vue 3 + Typescript + Vite 搭建H5通用架子项目初衷

用最新的前端技术开发一个H5的通用架子，让前端同学开箱即用，迅速投入战斗。

项目源码在文章结尾处，记得查收哦~ 如果有帮助到你，请点个👍~

搭建项目

Vite 需要 Node.js 版本 >= 12.0.0。

# NPM npm init @vitejs/app # YARN yarn create @vitejs/app 复制代码

这里选择 vue3+ Ts

主要功能常用目录别名 Vant/Rem适配 scss支持、_mixin.scss、_variables.scss 页面标题模块化自动注册：自动注册router/自动注册Vuex axios封装、api管理、请求代理生产环境优化项目结构 # vue3Ts ├── index.html ├── package.json ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ ├── config // 基础配置 │ ├── directives // 定义指令 │ │ └── cope.ts │ ├── router │ │ └── modules // 路由模块 │ ├── store │ │ └── modules // vuex模块 │ ├── utils // 工具类 │ └── main.ts ├──── postcss.config.js │──── vite.config.ts └──── tsconfig.json 复制代码常用目录别名 alias: { '@': '/src', 'assets': '/src/assets', 'components': '/src/components', 'config': '/src/config', 'router': '/src/router', 'api': '/src/api', } 复制代码 scss支持、移动端适配 postcss

选择scss作为css预处理，并对 variables、common.scss作全局引入。

css: { preprocessorOptions: { // 引入公用的样式 scss: { additionalData: `@import "@/styles/common.scss";@import "@/styles/variable.scss";`, } } } 复制代码

安装postcss包

yarn add postcss-pxtorem -D 复制代码

创建postcss.config.js 文件

module.exports = { "plugins": { "postcss-pxtorem": { rootValue: 37.5, // Vant 官方根字体大小是 37.5 propList: ['*'], selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换 } } } 复制代码

这里有个问题，ts项目创建的postcss.config.ts文件，项目启动他没有生效，估计是ts文件导入解析的格式与js文件不一样

度娘了很久没找到解决方案，所以还是创建了js 文件

需要更改一下 tsconfig.ts, 直接往内加入两条配置就行了

//tsconfig.ts "allowJs": true, "noImplicitAny": false, 复制代码

引入 lib-flexible 设置 rem 基准值, 重启项目即可

yarn add lib-flexible --save //main.ts import 'lib-flexible' 复制代码模块化自动注册

vuex, router模块化使用vite importa.globEager 方法获取文件上下文下面用路由自动注册为例

安装

npm install vue-router@4 复制代码

配置文件

这里模块化路由,配置 router/index.ts 文件

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"; let routes: Array = [ { path: "/", name: "home", component: () => import("@/page/home/home.vue"), meta:{ title:'首页', keepAlive: true, is_show_header: false, is_show_footer: false, back: 'back', } }, ]; //模块化路由，将router 文件夹下的ts文件内路由自动导入 const routesModules = importa.globEager('./**/*.ts') const modules:Array = [] Object.keys(routesModules).forEach(key => { modules.push(...routesModules[key].default) }) routes = routes.concat(modules) const router = createRouter({ history: createWebHashHistory(), routes }); export default router; 复制代码

其他模块的路由文件只需要这样写可以了

// about.ts export default [ { path: "/about", name: "about", component: () => import("@/page/about/about.vue"), meta:{ title:'关于', keepAlive: true, is_show_header: false, is_show_footer: false, back: 'back', } }, ] 复制代码

在main.ts内注册

// main.ts import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App) .use(router) .mount('#app') 复制代码 router的meta设置

路由meta内添加元信息，不设置默认为false

is_show_footer ：是否显示底部栏 is_show_footer：是否显示顶部导航栏 keepAlive ：是否缓存页面

配合vue-router的beforeEach获取meta信息，不填meta默认为false, 数据保存到veux 内，方便后续业务做更多扩展设置

api请求loading层

在封装的axios内，使用请求拦截请求数据是否有closeLoading字段，没设置默认开启loading层。 vuex内 isLoading 控制是否显示

const service:any = axios.create({ // baseURL:'http://api.ourclass.com.cn', baseURL:baseUrl(), timeout: 10000, // request timeout }) const loadingVex = (data:boolean) =>{ store.commit('setting/set_isLoading',data) } // request interceptor 请求拦截 service.interceptors.request.use( config => { if(config.method === 'post'){ config.data = qs.stringify(config.data) } if(!config.closeLoading){ //api如果需要关闭loading则设置 closeLoading ，默认不关闭 loadingVex(true) } return config }, error => { loadingVex(false) return Promise.reject(error) } ) 复制代码支持api有多个baseURL const apiTypes = { base: importa.env.VITE_API, gateway: importa.env.VITE_DEMO_API, } // request interceptor 请求拦截 service.interceptors.request.use( config => { const type = config.type || 'base' //增加type获取判断 config.baseURL = apiTypes[type] || '' return config }, error => { return Promise.reject(error) } ) //api 写入 export function getInfo(data) { // return api.post("/Ucenter/Login/info", data, {type:'gateway'}); // baseURL 拿的是 VITE_DEMO_API return api.post("/Ucenter/Login/info", data); } 复制代码生产环境优化

上线前，得优化一下资源了，该项目做了如下几步操作

使用br压缩代码，配置文件见 vite.config.ts 移除掉debugger/console 相关连接

源码地址萌新求支持手动狗头

【本文地址】

基于Vue 3 + Typescript + Vite 搭建H5通用架子

基于Vue 3 + Typescript + Vite 搭建H5通用架子

今日新闻

推荐新闻